<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动与定位</title>
		<style type="text/css">
			*{
				padding:0;
				margin:0;
			}
			.box{
				width:200px;
				height:200px;
				background:skyblue;
				float:left;
				border:1px red solid;
				font-size:35px;
				text-align:center;
				float:left;/* 左浮动/none没有浮动/right右浮动 */
				}
			.box2{
				width:800px;
				height:200px;
				border:1px solid black;
				margin:auto;
			}
			.clear{
				clear:both;/* 清除两端浮动 */
			}
			.bigbox{
				/*overflow:hidden;*/ /*超出部分隐藏*/
			}
			/*清除浮动第三种方法*/
			.clearfix:after{	/*在clearfix类后面*/
				content:"";		/*内容为空*/
				display:block;	/*将伪元素转换为块级盒子*/
				height:0;	/*高度设置为0*/
				clear:both;	/*清除两端浮动*/
				visibility:hidden;	/*显示状态：隐藏*/
			}
			.clearfix:after,.clearfix:before{	/*在clearfix类前后面*/
				content:"";		/*内容为空*/
				display:block;	/*将伪元素转换为块级盒子*/
				height:0;	/*高度设置为0*/
				clear:both;	/*清除两端浮动*/
				visibility:hidden;	/*显示状态：隐藏*/
			}
		</style>
	</head>
	<body>
		<!-- 传统网页布局：标准流+浮动+定位 -->
		<!-- 快速创建标签：p*3>tab -->
		<!-- 快速创建类名为box的盒子：标签.box*个数>tab -->
		<!--
		一，浮动特性:
		1.浮动元素会脱离标准流（脱标）
		2.浮动元素一行内显示并且顶部对齐
		3.浮动元素具有行内块类似特性
		二，清除浮动的方法:
		1.额外标签法:隔墙法.即给浮动的盒子后添加一个额外的块级标签,
		并给标签加入clear:both;（清除两端浮动）。--此方法不常用
		2.给父级元素添加overflow:hidden 属性。开发中常用的解决办法
		-->
		<!--
		父级用标准流排列上下位置，内部子元素用浮动排列左右位置
		-->
		<div class="bigbox">
			<div class="box">1</div>
			<div class="box" style="height:180px">2</div>
			<div class="box" style="height:240px">3</div>
			<!--<div class="clear"></div>-->
		</div>
		<div class="box2">
			<img src="捕获.jpg" />
			</div>
		
		
	</body>
</html>
